import { Table, Input , Col, Row, Button ,Tree,DatePicker ,Modal,Select,Space,Menu } from 'antd';
const { Search } = Input;
import ECharts from 'echarts-for-react';
import React, { useState} from 'react';
import { EditableProTable } from '@ant-design/pro-table';
import {
  DownOutlined,
  PaperClipOutlined,
  ApartmentOutlined,
  MehOutlined,
  SearchOutlined,
  FrownFilled,
} from '@ant-design/icons';
import cloneDeep from 'lodash.clonedeep';
import styles from './style.less'
import { isNull } from 'lodash';
const { Option } = Select;
const { Column, ColumnGroup } = Table;
const MultipleRateReport: React.FC = () => {

  const DEFAULT_OPTION  = {
    color: ["#b18afd", "#df9e56","#df5656","#2cdbe3"],
    tooltip: {
        trigger: 'item'
    },
    title: {
      text: "用电量",
      style:{backgroundColor: '#ccc'},
      
      left: "center",
      top: "center",
      textStyle: {
        fontSize: 24,
        color: 'white'
      },
    },
    legend: {
       top: 'bottom',
       itemWidth: 10,
       itemHeight:10,
       textStyle: {
        color: 'rgba(209, 233, 237, 0.5)'
      }
    },
    series: [
        {
            name: '报警分类',
            type: 'pie',
            radius: ['40%', '70%'],
            data: [
              {value: 0, name: '尖'},
              {value: 0, name: '峰'},
              {value: 0, name: '平'},
              {value: 0, name: '谷'}
            ]
        }
    ]
};

const DEFAULT_OPTION1  = {
  color: ["#b18afd", "#df9e56","#df5656","#2cdbe3"],
  tooltip: {
      trigger: 'item'
  },
  title: {
    text: "用电金额",
    style:{backgroundColor: '#ccc'},
    
    left: "center",
    top: "center",
    textStyle: {
      fontSize: 24,
      color: 'white'
    },
  },
  legend: {
     top: 'bottom',
     itemWidth: 10,
     itemHeight:10,
     textStyle: {
      color: 'rgba(209, 233, 237, 0.5)'
    }
  },
  series: [
      {
          name: '用电金额',
          type: 'pie',
          radius: ['40%', '70%'],
          data: [
                {value: 0, name: '尖'},
                {value: 0, name: '峰'},
                {value: 0, name: '平'},
                {value: 0, name: '谷'}
          ]
      }
  ]
};


const OPTION  ={
  color: ["#b18afd", "#df9e56","#df5656","#2cdbe3"],
  legend: {
      left:'right',
      itemWidth: 10,
      itemHeight:10,
      itemStyle: {
        borderRadius:'10px',
      },
      textStyle: {
        color: "white"
      }
  },

  grid: {
    left: 30,
    right:30
  },
  tooltip: {},
  dataset: {
      source: [
          ['product', '尖', '峰', '平', '谷'],
          ['23', 43.3, 85.8, 93.7, 93.7],
          ['24', 83.1, 73.4, 55.1, 55.1],
          ['25', 86.4, 65.2, 82.5, 82.5],
          ['26', 72.4, 53.9, 39.1, 39.1]
      ]
  },
  xAxis: {
    axisLine:{
      lineStyle:{
        color:"#fff",
      }
    },  
  type: 'category'},
  yAxis: { 
    axisLine:{
    lineStyle:{
      color:"#fff",
    }
  }, },
  // Declare several bar series, each will be mapped
  // to a column of dataset.source by default.
  series: [
      {type: 'bar'},
      {type: 'bar'},
      {type: 'bar'},
      {type: 'bar'}
  ]
};
const [option, setOption] = useState(DEFAULT_OPTION);
const [option1, setOption1] = useState(DEFAULT_OPTION1);

const [zhuOption, setZhuOption] = useState(OPTION);
const data = [
  {
    key: '1',
    time: '23日',
    jianElectricQuantity: 0.0,
    jianUnitPrice: 32,
    jianAmount: 0.0,
    fengElectricQuantity: 0.0,
    fengUnitPrice: 32,
    fengAmount: 0.0,
    pingElectricQuantity: 0.0,
    pingUnitPrice: 32,
    pingAmount: 0.0,
    guElectricQuantity: 0.0,
    guUnitPrice: 32,
    guAmount: 0.0,
    totalElectricQuantity: 0.0,
    totalUnitPrice: 32,
    totalAmount: 0.0,

  },
  {
    key: '1',
    time: '23日',
    jianElectricQuantity: 0.0,
    jianUnitPrice: 32,
    jianAmount: 0.0,
    fengElectricQuantity: 0.0,
    fengUnitPrice: 32,
    fengAmount: 0.0,
    pingElectricQuantity: 0.0,
    pingUnitPrice: 32,
    pingAmount: 0.0,
    guElectricQuantity: 0.0,
    guUnitPrice: 32,
    guAmount: 0.0,
    totalElectricQuantity: 0.0,
    totalUnitPrice: 32,
    totalAmount: 0.0,
  },
  {
    key: '1',
    time: '23日',
    jianElectricQuantity: 0.0,
    jianUnitPrice: 32,
    jianAmount: 0.0,
    fengElectricQuantity: 0.0,
    fengUnitPrice: 32,
    fengAmount: 0.0,
    pingElectricQuantity: 0.0,
    pingUnitPrice: 32,
    pingAmount: 0.0,
    guElectricQuantity: 0.0,
    guUnitPrice: 32,
    guAmount: 0.0,
    totalElectricQuantity: 0.0,
    totalUnitPrice: 32,
    totalAmount: 0.0,
  },
];






    function PickerWithType({ type, onChange }) {
      if (type === 'date') return <DatePicker   popupStyle={{ background: 'rgb(20, 49, 115)'}}    bordered={false}  onChange={onChange} />;
      return <DatePicker     popupStyle={{ background: 'rgb(20, 49, 115)'}}   bordered={false}  picker={type} onChange={onChange} />;
    }

   
    function SwitchablePicker() {
      const [type, setType] = useState('date');
      return (
        <Space>
          <div  className={styles.inputBg} >
            <Select value={type}  dropdownStyle={{ background: 'rgb(20, 49, 115)'}}   bordered={false}  onChange={setType}>
                <Option value="date">日</Option>
                <Option value="week">周</Option>
                <Option value="month">月</Option>
                <Option value="quarter">季度</Option>
            </Select>
          </div>
          <div  className={styles.inputBg} >
            <PickerWithType  type={type} onChange={value => console.log(value)} />
          </div>
        </Space>
      );
    }
    return (
      <>
        <Row gutter={[0,24]} >
        <div  className={styles.inputBg} >
            <Select  bordered={false}  defaultValue=""  dropdownStyle={{ background: 'rgb(20, 49, 115)'}}   >
               <Option value="">全部区域</Option>
                <Option value="week">区域1</Option>
                <Option value="month">区域2</Option>
                <Option value="quarter">区域3</Option>
            </Select>
          </div>
          <div  className={styles.inputBg} >
            <Select  bordered={false}  style={{ width: 'auto',minWidth: 120 }} defaultValue=""  dropdownStyle={{ background: 'rgb(20, 49, 115)'}} >
                <Option value=""  >全部类型</Option>
                <Option value="week">类型1</Option>
                <Option value="month">类型2</Option>
                <Option value="quarter">类型3</Option>
            </Select>
          </div>
          <div  className={styles.inputBg} >
            <Select  bordered={false} style={{ width: 'auto',minWidth: 120 }} defaultValue=""  dropdownStyle={{ background: 'rgb(20, 49, 115)'}} >
                <Option value=""  >全部设备</Option>
                <Option value="week">设备1</Option>
                <Option value="month">设备2</Option>
                <Option value="quarter">设备3</Option>
            </Select>
          </div>
           <SwitchablePicker />
         </Row>
        <Row gutter={24}  > 
          <Col span={18} ><ECharts option={zhuOption} style={{ height: 400, width: '100%' }} /></Col>
          <Col  span={6}>
            <div>
              <ECharts option={option} style={{ width: '100%' }} />
            </div>

          </Col>
        </Row>
        <Row gutter={[0,24]}   > 
          <Col span={18}> 
          <Table   pagination={{ position: ['none','none'] }}     scroll={{ x: 'calc(700px + 50%)'}} dataSource={data} style={{width:'100%'}}> 
            <Column title="时间" dataIndex="time" key="time" />
            <ColumnGroup title="尖">
              <Column title="电量(kW.h)" dataIndex="jianElectricQuantity" key="jianElectricQuantity" />
              <Column title="单价(元/kW.h)" dataIndex="jianUnitPrice" key="jianUnitPrice" />
              <Column title="金额(元)" dataIndex="jianUnitPrice" key="jianUnitPrice" />
            </ColumnGroup>
            <ColumnGroup title="峰">
              <Column title="电量(kW.h)" dataIndex="fengElectricQuantity" key="fengElectricQuantity" />
              <Column title="单价(元/kW.h)" dataIndex="fengUnitPrice" key="fengUnitPrice" />
              <Column title="金额(元)" dataIndex="fengUnitPrice" key="fengUnitPrice" />
            </ColumnGroup>
            <ColumnGroup title="平">
              <Column title="电量(kW.h)" dataIndex="pingElectricQuantity" key="pingElectricQuantity" />
              <Column title="单价(元/kW.h)" dataIndex="pingUnitPrice" key="pingUnitPrice" />
              <Column title="金额(元)" dataIndex="pingUnitPrice" key="pingUnitPrice" />
            </ColumnGroup>
            <ColumnGroup title="谷">
              <Column title="电量(kW.h)" dataIndex="guElectricQuantity" key="guElectricQuantity" />
              <Column title="单价(元/kW.h)" dataIndex="guUnitPrice" key="guUnitPrice" />
              <Column title="金额(元)" dataIndex="guUnitPrice" key="guUnitPrice" />
            </ColumnGroup>
            <ColumnGroup title="合计">
              <Column title="电量(kW.h)" dataIndex="totalElectricQuantity" key="totalElectricQuantity" />
              <Column title="单价(元/kW.h)" dataIndex="totalUnitPrice" key="totalUnitPrice" />
              <Column title="金额(元)" dataIndex="totalUnitPrice" key="totalUnitPrice" />
            </ColumnGroup>
          </Table>
          </Col>
          <Col span={6}><ECharts option={option1} style={{ width: '100%' }} /></Col>
        </Row>
     
       </>
    );
};

export default MultipleRateReport;